<template>
  <div class="margin-container-list">
    <!-- 操作区域 -->
    <div class="top-operate">
      <div class="pad-t-15">
        <el-input @keyup.enter.native="handleSearch" v-model="keyword" placeholder="文章名称/作者"
                  style="width: 300px"></el-input>
        <el-date-picker
          v-model="starEndTime"
          type="daterange"
          range-separator="至"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
        <el-button type="primary" @click="handleSearch">查询</el-button>
      </div>
    </div>
    <div class="pad-b-20">
      <el-button @click="handleCreate" type="primary">新建文章</el-button>
      <el-button @click="bacthDelete">批量删除</el-button>
    </div>
    <!-- 内容列表 -->
    <div class="table-container">
      <el-table :data="distributeArticleList" @sort-change="sortChange" @selection-change="handleSelectionChange"
                v-loading="listLoading" element-loading-text="加载中"
                style="width: 100%">
        <el-table-column width="55px" type="selection" ></el-table-column>
        <el-table-column label="文章标题" min-width="240px">
          <template slot-scope="scope">
            <div @click="handleUpdate(scope.row)">
              <a><span style="color: #2d8cf0">{{scope.row.title}}</span></a>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="作者" prop="authorName" width="240px">
        </el-table-column>
        <el-table-column label="任务创建时间" prop="createTime" sortable="custom" width="240px">
          <template slot-scope="scope">
            <span>{{scope.row.createTime}}</span>
          </template>
        </el-table-column>
        <el-table-column width="140px" label="操作" align="right" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="medium" @click="handleShare(scope.row)">分发</el-button>
            <el-button type="text" size="medium" @click="handleUpdate(scope.row)">编辑</el-button>
            <el-button type="text" size="medium" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 列表分页 -->
    <div class="pagination">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="distributeArticleListQuery.currentPage"
                     :page-sizes="[10, 20, 50, 100]" :page-size="distributeArticleListQuery.size"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </div>
  </div>
</template>


<style scoped>
  .user-avatar{
    width: 46px;
    height: 46px;
    display: block;
    border-radius: 50px;
  }
</style>

<script>
  import { getNameByPath } from '@/utils/get-name-by-path' // 不要删除，根据URL获取文件名
  import { pagingDistributeArticle, deleteContentArticle, bacthDeletes } from '@/api/content/distributeArticle'
  import elDragDialog from '@/directive/el-dragDialog' // base on element-ui

  export default {
    name: getNameByPath(),
    directives: {
      // 拖动窗口
      elDragDialog
    },
    data() {
      return {
        distributeArticleList: [],
        ids: '',
        total: null,
        listLoading: true,
        keyword: '',
        multipleSelection: [],
        starEndTime: [],
        distributeArticleListQuery: {
          currentPage: 1,
          size: 10,
          startDate: null,
          endDate: null,
          title: null,
          enterpriseId: this.getEnterpriseId()
        },
        distributeArticle: {
          articleId: '',
          createTime: '',
          delFlag: '',
          articleType: '',
          authorName: '',
          title: '',
          mainPicUrl: '',
          description: '',
          contentArticleUrl: ''
        }
      }
    },
    // 过滤器
    filters: {
      statusFilter(status) {
        const statusMap = {
          1: 'success',
          2: 'danger'
        }
        return statusMap[status]
      }
    },
    // 初始化页面
    created() {
      this.initDistributeArticleList()
    },
    methods: {
      initDistributeArticleList() {
        this.listLoading = true
        pagingDistributeArticle(this.distributeArticleListQuery).then(response => {
          if (response.isError) return
          this.listLoading = false
          this.distributeArticleList = response.data.records
          this.total = response.data.total
        })
      },
      // 列表排序
      sortChange(data) {
        const { prop, order } = data
        if (prop === 'createTime') {
          if (order === 'ascending') {
            this.distributeArticleListQuery.ascs = 'createTime'
            this.distributeArticleListQuery.descs = ''
          } else {
            this.distributeArticleListQuery.ascs = ''
            this.distributeArticleListQuery.descs = 'createTime'
          }
        }
        this.initDistributeArticleList()
      },
      handleClick() {
        this.initDistributeArticleList()
      },
      handleSearch() {
        this.searchReset()
        this.distributeArticleListQuery.currentPage = 1
        if (this.starEndTime) {
          if (this.starEndTime.length > 0) {
            this.distributeArticleListQuery.startDate = this.starEndTime[0]
            this.distributeArticleListQuery.endDate = this.starEndTime[1]
          }
        }
        if (this.keyword !== '') {
          this.distributeArticleListQuery.title = this.keyword
        }
        this.distributeArticleListQuery.authFlag = this.authFlagType
        this.initDistributeArticleList()
      },
      searchReset() {
        this.distributeArticleListQuery = {
          currentPage: 1,
          size: 10,
          startDate: null,
          endDate: null,
          title: null,
          enterpriseId: this.getEnterpriseId()
        }
      },
      handleSizeChange(val) {
        this.distributeArticleListQuery.size = val
        this.initDistributeArticleList()
      },
      handleCurrentChange(val) {
        this.distributeArticleListQuery.currentPage = val
        this.initDistributeArticleList()
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      // 新建文章
      handleCreate() {
        this.$router.push({ path: '/content/distributeArticle/add/index' })
      },
      // 详情
      handleUpdate(row) {
        this.$router.push({ path: '/content/distributeArticle/add/index', query: { articleId: row.articleId }})
      },
      // 分发
      handleShare(row) {
        this.$router.push({ path: '/content/distributeArticle/release/index', query: { articleId: row.articleId }})
      },
      // 删除
      handleDelete(row) {
        this.$confirm('是否删除该文章?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteContentArticle(row.articleId).then(response => {
            if (response.isError) return
            this.$message({
              type: 'success',
              message: response.msg
            })
            this.initDistributeArticleList()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      // 批量删除
      bacthDelete() {
        if (this.multipleSelection.length > 0) {
          this.$confirm('是否删除?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            const articleIds = []
            this.multipleSelection.forEach(item => {
              articleIds.push(item.articleId)
            })
            bacthDeletes(articleIds).then(response => {
              if (response.isError) return
              this.$message({
                type: 'success',
                message: response.msg
              })
              this.initDistributeArticleList()
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
        } else {
          this.$message({
            type: 'error',
            message: '请选择要删除的数据!'
          })
        }
      }
    },
    mounted() {

    }
  }
</script>
